<template>
  <div class="list-container">
    <van-search v-model="value" @search="searchMethod" shape="round" background="#fff" placeholder="请输入搜索关键词" />
    <van-dropdown-menu active-color="#1989fa">
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item v-model="value2" :options="option2" />
    </van-dropdown-menu>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell
          center
          v-for="(item, index) in list"
          :key="index"
          :title="item.sign_name_cache"
          clickable
          @click="ClickSign(item.sign_type, item.siid, item.user_number_cache)"
        >
          <div slot="label">{{ item.createTime | relativeTime }}</div>
          <div slot="default" v-if="item.step == 1"><van-tag round type="success">已签到</van-tag></div>
          <div slot="default" v-if="item.step == 0"><van-tag round type="danger">未签到</van-tag></div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
    <van-action-sheet v-model="show" title="签到提交" style="height: 60%">
      <van-field v-model="password" label="密码" placeholder="请输入签到密码" v-if="SignType == 1" />
      <center>
        <van-notice-bar mode="closeable" v-if="SignType == 4">请输入手势密码</van-notice-bar>
        <canvas-lock ref="canvas" @drawEnd="drawEnd($event)" :disbaled="false" v-if="SignType == 4"></canvas-lock>
        <!--center 显示中心位置 lng经度 lat纬度     zoom 视图的缩放比例 -->
      </center>
      <baidu-map
        class="map"
        :center="{ lng: 113.695006, lat: 34.588096 }"
        :zoom="15"
        :scroll-wheel-zoom="true"
        @click="getPoint"
        v-if="SignType == 3"
      >
        <!--地图类型，两种：一种是路线一种是绿的那种-->
        <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
        <!--是否显示标注-->
        <div v-if="locationFlag">
          <bm-marker :position="postionMap" :dragging="true" animation="BMAP_ANIMATION_BOUNCE" />
        </div>
        <!--搜索功能-->
        <!--display: none样式很关键，因为下面默认会有地址提示信息很长，很烦，这样搜索会很舒服，-->
        <bm-local-search :keyword="keyword" :auto-viewport="true" zoom="12.8" style="display: none"></bm-local-search>
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      </baidu-map>
      <van-button v-if="SignType == 3" style="width: 100%;position: sticky;bottom: 0" @click="finishSign_map" type="info">提交位置</van-button>

      <van-button
        v-if="SignType == 1"
        type="info"
        style="margin-top: 40%; margin-left: 10%; width: 80%"
        size="large"
        round
        block
        @click="finshSign"
        >确认</van-button
      >
    </van-action-sheet>
  </div>
</template>

<script>
import Vue from 'vue'
import { PullRefresh } from 'vant'
import { DropdownMenu, DropdownItem } from 'vant'
Vue.use(DropdownMenu)
Vue.use(DropdownItem)
Vue.use(PullRefresh)
import { CanvasLock } from 'vue-lock'
import { mapGetters } from 'vuex'

export default {
  components: {
    CanvasLock
  },
  name: 'Index',

  data() {
    return {
      option1: [
        { text: '全部状态', value: 0 },
        { text: '已签到', value: 1 },
        { text: '未签到', value: 2 }
      ],
      option2: [
        { text: '默认排序', value: 'a' },
        { text: '时间正序', value: 'b' },
        { text: '时间倒序', value: 'c' }
      ],
      value1: 0,
      value2: 'c',
      // 当前页
      show: false,
      refreshing: false,
      number: 0,
      list: [],
      loading: false,
      finished: false,
      value: '',
      password: '',
      SignType: '',
      updateSignVO: {
        data: '',
        number: '',
        siid: '',
        uid: ''
      },
      search: '',

      shoushi: [],
      keywordReady: '', // 在输入框中输入的值
      add: {
        siteName: '',
        site: '',
        jd: '',
        wd: '',
        desce: '',
        type: '',
        jgName: '',
        jgNum: ''
      },
      postionMap: {
        // 地图坐标
        lng: 120.211486,
        lat: 30.256576
      },
      keyword: '', // 搜索框关键词
      locationFlag: true
    }
  },
  computed: {
    ...mapGetters(['uid'])
  },
  mounted() {
    // this.getPoint({ lng: 113.695006, lat: 34.588096 })
  },
  methods: {
    onRefresh() {
      // 清空列表数据
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    },
    searchMethod() {
      console.log('s', this.value)
      this.list = this.list.filter(item => {
        return item.sign_name_cache.indexOf(this.value) !== -1
      })
    },
    async onLoad() {
      if (this.refreshing) {
        this.list = []
        this.refreshing = false
      }
      // console.log(this.uid)
      // 判断是否完毕（finish）

      // 加载数据
      const data = await this.$api.sign.findSignByUid({ uid: this.uid, number: this.number })
      console.log(data)
      if (!data.data.content) {
        data.data.content = []
      }
      this.list.push(...data.data.content)
      // UI更新,包括finish
      this.loading = false
      this.number++
      if (data.data.last) {
        this.finished = true
      }
    },
    ClickSign(type, siid, number) {
      this.show = true
      this.SignType = type
      console.log(this.SignType)
      this.updateSignVO.siid = siid
      this.updateSignVO.number = number
    },
    async finishSign_map() {
      this.updateSignVO.uid = this.uid
      this.updateSignVO.data = this.postionMap.lng + ',' + this.postionMap.lat
      const data = await this.$api.sign.userFinshSign(this.updateSignVO)
      console.log(data)
    },
    async finshSign() {
      this.updateSignVO.uid = this.uid
      this.updateSignVO.data = this.password
      const data = await this.$api.sign.userFinshSign(this.updateSignVO)
      console.log(data)
    },
    // 完成签到后
    async drawEnd(e) {
      console.log(e)
      this.shoushi = []
      for (const item of e) {
        this.shoushi.push(item.index)
      }
      console.log(this.shoushi)
      this.shoushi = this.shoushi.join(',')
      this.updateSignVO.data = this.shoushi
      this.updateSignVO.uid = this.uid
      const data = await this.$api.sign.userFinshSign(this.updateSignVO)
      console.log(data)
    },
    searchLocal() {
      this.keyword = this.keywordReady
    },
    getPoint(e) {
      // 点击地图获取一些信息，
      console.log('e', e)
      this.show = true
      this.postionMap.lng = e.point.lng // 通过  e.point.lng获取经度
      this.postionMap.lat = e.point.lat // 通过  e.point.lat获取纬度
      this.add.jd = e.point.lng
      this.add.wd = e.point.lat
      this.zoom = e.target.getZoom()

      const geocoder = new BMap.Geocoder() // 创建地址解析器的实例
      geocoder.getLocation(e.point, rs => {
        if (!this.locationFlag) {
          // 地图标注为false时，不让位置在搜索框中显示
          return true
        }
        this.keywordReady = rs.address
        // 地址描述(string)
        // console.log(rs.address);    //这里打印可以看到详细地址信息
        // console.log(rs.addressComponents);//结构化的地址描述(object)
        // console.log(rs.addressComponents.province); //省
        // console.log(rs.addressComponents.city); //城市
        // console.log(rs.addressComponents.district); //区县
        // console.log(rs.addressComponents.street); //街道
        // console.log(rs.addressComponents.streetNumber); //门牌号
        // console.log(rs.surroundingPois); //附近的POI点(array)
        // console.log(rs.business); //商圈字段，代表此点所属的商圈(string)
      })
    },
    // 出现标注地址
    getFlag() {
      this.locationFlag = true
    },
    // 取消标注
    cancelFlag() {
      this.locationFlag = false
    }
  }
}
</script>

<style scoped lang='scss'>
.list-container {
  .wrap-list {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 50px;
    top: 90px;
    overflow-y: auto;
  }
  /deep/ .map {
    width: 100%;
    height: 100%;
  }
}
</style>
